<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>显示和隐藏元素</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="../jquery-1.8.3.js"></script>
<style type="text/css">
    body,ul,p {
        margin: 0px;
        padding: 0px;
        font-family: "Microsoft Yahei", Helvetica, Arial, sans-serif;
    }

    a {
        color: #B847FF;
        text-decoration: none;
    }

    a:hover {
        color: red;
        text-decoration: underline;
    }

    .SubCategoryBox {
        background: #E0E0E0;
        text-align: center;
    }

    p {
        text-align: left;
        font-size: 20px;
    }

    ul {
        list-style-type: none;
        width: 750px;
        margin: auto;
    }

    ul li {
        line-height: 20px;
        width: 150px;
        display: inline-block;
        text-align: left;
        color: #0762BE;
    }
</style>
<script type="text/javascript">
    $(function() {
        //隐藏索引是5以上~最后一个元素之前的元素,默认选择
        var $category = $('ul li:gt(5):not(:last)');
        $category.hide();

        //点击链接显示或者隐藏
        // $('div.showmore a').click(function() {
        //  if ($category.is(':visible')) {
        //      $category.hide(3000,function() {
        //          alert('部分商品已被隐藏');
        //      });
        //      $('div.showmore a span').text('显示全部品牌');
        //  } else{
        //      $category.show(2000,function() {
        //          alert('已经显示全部商品');
        //      });
        //      $('div.showmore a span').text('精简显示品牌');
        //  }

        //  return false;
        // });

        $('div.showmore a').toggle(function() {
            $category.hide(null, function() {
                console.log( $(this).text() + 'is hidden!');
            });
            // alert('部分商品已被隐藏');
            $('div.showmore a span').text('显示全部品牌');
        },function() {
            $category.show(null, function() {
                console.log( $(this).text() + 'is visible!');
            });
            // alert('已经显示全部商品');
            $('div.showmore a span').text('精简显示品牌');
        });
    });
</script>
</head>
<body>
<div class="SubCategoryBox">
    <p>当前的商品:</p>
    <ul>
        <li><a href="#">佳能</a>(30440)</li>
        <li><a href="#">索尼</a>(27220)</li>
        <li><a href="#">三星</a>(20808)</li>
        <li><a href="#">尼康</a>(17821)</li>
        <li><a href="#">松下</a>(12289)</li>
        <li><a href="#">卡西欧</a>(8242)</li>
        <li><a href="#">富士</a>(14894)</li>
        <li><a href="#">柯达</a>(9520)</li>
        <li><a href="#">宾得</a>(2195)</li>
        <li><a href="#">理光</a>(4114)</li>
        <li><a href="#">奥林巴斯</a>(12205)</li>
        <li><a href="#">明基</a>(1466)</li>
        <li><a href="#">爱国者</a>(3091)</li>
        <li><a href="#">其它品牌相机</a>(7275)</li>
    </ul>
    <div class="showmore">
        <a href="more.html"><span>显示全部品牌</span></a>
    </div>
</div>
</body>
</html>
